<template>
	<view class="container">
		<u--form :labelStyle="{fontSize: '28rpx', color: '#312C2A', height: '80rpx'}" labelWidth="100"
			labelPosition="left" :model="model" :rules="rules" errorType="toast">
			<view class="form">

				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a30.png"></u-image>
							<view class="">姓名</view>
						</view>
						<view class="right">
							<u--input inputAlign="right" placeholder="请输入您的姓名" v-model="model.name"
								border="none"></u--input>
						</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom @click="showSex = true;">
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a44.png"></u-image>
							<view class="">性别</view>
						</view>
						<view class="right">
							<u--input v-model="model.name" disabled placeholder="请选择性别" inputAlign="right"
								disabledColor="transparent" border="none"></u--input>
							<template #right>
								<u-icon name="arrow-right"></u-icon>
							</template>
						</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a31.png"></u-image>
							<view class="">手机号</view>
						</view>
						<view class="right">
							<u--input inputAlign="right" placeholder="请输入您的手机号" v-model="model.name"
								border="none"></u--input>
						</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a45.png"></u-image>
							<view class="">住址</view>
						</view>
						<view class="right">
							<u--input inputAlign="right" placeholder="请输入您的住址" v-model="model.name"
								border="none"></u--input>
						</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a46.png"></u-image>
							<view class="">身份证号</view>
						</view>
						<view class="right">
							<u--input inputAlign="right" placeholder="请输入您的身份证号" v-model="model.name"
								border="none"></u--input>
						</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a47.png"></u-image>
							<view class="">既往病史</view>
						</view>
						<view class="right">
							<u--input inputAlign="right" placeholder="请输入您的既往病史" v-model="model.name"
								border="none"></u--input>
						</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a48.png"></u-image>
							<view class="">遗传史</view>
						</view>
						<view class="right">
							<u--input inputAlign="right" placeholder="请输入您的遗传史" v-model="model.name"
								border="none"></u--input>
						</view>
					</view>
				</u-form-item>
				<u-form-item :borderBottom="false" @click="showRelationship = true;">
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" src="/static/images/a49.png"></u-image>
							<view class="">就诊人关系</view>
						</view>
						<view class="right">
							<u--input v-model="model.name" disabled placeholder="选择就诊人关系" inputAlign="right"
								disabledColor="transparent" border="none"></u--input>
							<template #right>
								<u-icon name="arrow-right"></u-icon>
							</template>
						</view>
					</view>
				</u-form-item>
			</view>
		</u--form>
	</view>

	<view class="btn">
		<u-button :disabled="!disabled" throttleTime="1000"
			:customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false"
			type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)"
			@click="confirm">确认添加</u-button>
	</view>
	<!-- 性别选择框 -->
	<u-picker closeOnClickOverlay :show="showSex" :columns="actions" @cancel="showSex = false" @close="showSex = false" @confirm="sexSelect" keyName="name"></u-picker>

	<!-- 就诊人关系选择框 -->
	<u-picker closeOnClickOverlay :show="showRelationship" :columns="relationshipActions" @close="showRelationship = false" @cancel="showRelationship = false" @confirm="relationshipSelect" keyName="name"></u-picker>

</template>

<script setup>
	const model = ref({
		name: '',
		self: false,
		relationship: '',
	})
	const disabled = computed(() => {
		return model.value.name
	})
	const showSex = ref(false)
	const showRelationship = ref(false)
	const actions = ref([
		[{
				name: '男'
			},
			{
				name: '女'
			},
		]
	])
	const relationshipActions = ref([
		[	
			{
				name: '本人'
			},
			{
				name: '子女'
			},
			{
				name: '父母'
			},
		]
	])
	const rules = ref({
		name: [{
			required: true,
			message: '请输入手机号',
			trigger: ['change'],
		}, ]
	})
	const sexSelect = (e) => {
		console.log(e.value[0]);
		model.value.name = e.value[0].name
		showSex.value = false
	}
	const relationshipSelect = (e) => {
		model.value.relationship = e.value[0].name
		showRelationship.value = false
	}
	const confirm = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 50rpx 26rpx;

		.form {
			padding: 0 44rpx;
			background: #FFFFFF;
			border-radius: 30rpx;

			.form-item {
				@include between(100%);
				padding: 10rpx 0;

				.left {
					@include start(220rpx);

					&>view {
						color: #B3BCCC;
						font-size: 28rpx;
						margin-left: 16rpx;
					}
				}

				.right {
					flex: 1;
					margin-left: 30rpx;
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.self-set {
		@include end(100%);
	}

	.btn {
		padding: 0 55rpx;
		width: 100%;
		position: fixed;
		left: 50%;
		bottom: 70rpx;
		transform: translateX(-50%);
		z-index: 999;
	}
</style>